<template>
    <div class="logReg-container">
        <el-form ref="logRegForms" :model="logRegForm" :rules="logRegRules" class="logReg-form" label-position="left">
            <div class="title-container">
                <h3 class="title">万廷台球会员登录</h3>
            </div>
            <div v-if="isLogin">
                <div v-if="!forgot">
                    <el-form-item prop="account">
                        <span class="svg-container">
                            <svg-icon icon-class="user" />
                        </span>
                        <el-input ref="account" v-model="logRegForm.account" placeholder="账号" name="account"
                            type="text" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <span class="svg-container">
                            <svg-icon icon-class="password" />
                        </span>
                        <el-input :key="passwordType" ref="password" v-model="logRegForm.password" :type="passwordType"
                            placeholder="密码" name="password" @keyup.enter="handleLogin(logRegForms)" />
                        <span class="show-pwd" @click="showPwd">
                            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                        </span>
                    </el-form-item>
                </div>
                <div v-else>
                    <el-form-item prop="account">
                        <el-input ref="account" v-model="logRegForm.account" placeholder="账号" name="account"
                            type="text" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input :key="passwordType" ref="password" v-model="logRegForm.password" :type="passwordType"
                            placeholder="密码" name="password" @keyup.enter="handleLogin(logRegForms)" />
                        <span class="show-pwd" @click="showPwd">
                            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                        </span>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input ref="phone" v-model="logRegForm.phone" placeholder="手机号" name="phone" type="text" />
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input ref="code" v-model="logRegForm.code" placeholder="验证码" name="code"
                            type="text"></el-input>
                        <span class="phone-code" @click="getCode"> {{ !loadingCode ? '获取验证码' : cutDown }}</span>
                    </el-form-item>

                </div>
            </div>
            <div v-else>
                <el-form-item prop="name">
                    <el-input ref="name" v-model="logRegForm.name" placeholder="用户名" name="name" type="text" />
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input ref="phone" v-model="logRegForm.phone" placeholder="手机号" name="phone" type="text" />
                </el-form-item>
                <el-form-item prop="code">
                    <el-input ref="code" v-model="logRegForm.code" placeholder="验证码" name="code" type="text"></el-input>
                    <span class="phone-code" @click="getCode"> {{ !loadingCode ? '获取验证码' : cutDown }}</span>
                </el-form-item>
                <el-form-item prop="account">
                    <el-input ref="account" v-model="logRegForm.account" placeholder="账号" name="account" type="text" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input :key="passwordType" ref="password" v-model="logRegForm.password" :type="passwordType"
                        placeholder="密码" name="password" @keyup.enter="handleLogin(logRegForms)" />
                    <span class="show-pwd" @click="showPwd">
                        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                    </span>
                </el-form-item>
            </div>
            <el-button :loading="loading" type="primary" size="large" style="width: 100%; margin-bottom: 30px"
                @click.prevent="handleSubmit(logRegForms)">{{ !isLogin ? '注册' : forgot ? '修改密码' : "登录" }}</el-button>
            <div class="tips">
                <a class="reglink" @click.prevent="isLogin = false, forgot = false" v-if="isLogin">点击注册</a>
                <span style="margin-left: 20px;color:rgb(121,187,255)" @click="showBorder = !showBorder"
                    :class="{ border: showBorder }">管理员登录</span>
                <a class="reglink" @click.prevent="forgot = true" v-if="isLogin" style="margin-left:50%">忘记密码</a>
                <a class="reglink" @click.prevent="isLogin = true" v-else>已经注册点击登录</a>

            </div>
        </el-form>
    </div>
</template>


<script setup>
import { ref, reactive, nextTick, computed } from 'vue'
import useUserStore from '@/stores/module/user';
import { ElMessage } from 'element-plus';
import { validUsername, validPassword, validAccount, validPhoneNumber, validCode } from '@/utils/validate/login';
//引入用户相关的小仓库
let useStore = useUserStore()
defineOptions({ name: 'Login' })
const showBorder = ref(false)

//用户名校验
const validateName = (rule, value, callback) => {
    if (!validUsername(value)) {
        callback(new Error('用户名长度为 2-6 位，不能包含特殊符号'))
    } else {
        callback()
    }
}
//用户密码校验
const validatePassword = (rule, value, callback) => {
    if (!validPassword(value)) {
        callback(new Error('密码必须为 数字+密码(大小写) 8-12位'))
    } else {
        callback()
    }
}
//用户账号校验
const validateAccount = (rule, value, callback) => {
    if (!validAccount(value)) {
        callback(new Error('7-12位，必须包含数字、大写字母和小写字母'))
    } else {
        callback()
    }
}
//用户手机号校验
const validatePhone = (rule, value, callback) => {
    if (!validPhoneNumber(value)) {
        callback(new Error('请输入合法的手机号'))
    } else {
        callback()
    }
}
//验证码校验
const validateCode = (rule, value, callback) => {
    if (!validCode(value)) {
        callback(new Error('请输入合法的手机号'))
    } else {
        callback()
    }
}
// 是否是登陆操作
const isLogin = ref(true)
const loading = ref(false)
const password = ref('password')
const passwordType = ref('password')
const logRegForms = ref(null)
const forgot = ref(false)
//获取路由器

// 请求地址
const apiPath = computed(() => {
    if (isLogin.value) {
        if (forgot.value) {
            return 'userForgotPassword'
        } else {
            return 'userLogin'
        }
    } else {
        return 'userRegister'
    }
})

// 表单
const logRegForm = reactive({
    name: '测试',
    password: 'Wdd123456',
    account: "Admin00",
    phone: '13573832222',
    code: '111111'
})
// 检验规则
const logRegRules = reactive({
    account: [{ required: true, trigger: 'blur', validator: validateAccount }],
    password: [{ required: true, trigger: 'blur', validator: validatePassword }],
    name: [{ required: !isLogin.value, trigger: 'blur', validator: validateName }],
    phone: [{ required: !isLogin.value, trigger: 'blur', validator: validatePhone }],
    code: [{ required: !isLogin.value, trigger: 'blur', validator: validateCode }],
})
//提交
const handleSubmit = (formEl) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            loading.value = true
            try {
                //保证请求成功
                console.log(logRegForm.account, logRegForm.password)
                const { code, scode = null } = await useStore[apiPath.value](logRegForm)
                if (code == 2000) {
                    if (scode == 2) {
                        isLogin.value = true
                        forgot.value = false
                    }
                    loading.value = false
                    return false
                } else {
                    loading.value = false
                    if (scode == 0) {
                        console.log("为什么没触发我？")
                        ElMessage({
                            type: 'error',
                            message: '账号不存在，请检查是否输入正确'
                        })
                        return false
                    }
                    if (scode == 1) {
                        ElMessage({
                            type: 'error',
                            message: '手机号与账号绑定手机号不符，请检查是否输入正确'
                        })
                        return false
                    }
                    ElMessage({
                        type: 'error',
                        message: '登录失败，账号密码有误'
                    })
                    return false
                }
            } catch (error) {
                //失败加载效果消息
                loading.value = false
            }
        } else {
            console.log('error submit!')
            return false
        }
    })
}
// 回车提交登录
const handleLogin = (formEl) => {
    if (!formEl && !isLogin.value) return
    handleSubmit(formEl)
}
// 回车提交注册
// const handleReg = (formEl) => {
//     if (!formEl && isLogin.value) return
//     handleSubmit(formEl)
// }


// 密码切换
const showPwd = () => {
    if (passwordType.value === 'password') {
        passwordType.value = ''
    } else {
        passwordType.value = 'password'
    }
    nextTick(() => {
        password.value.focus()
    })
}

//获取验证码
const loadingCode = ref(false)
const cutDown = ref(60)
const getCode = () => {
    if (loadingCode.value) {
        return false
    }
    loadingCode.value = true
    ElMessage(
        { message: "验证码 111111" }
    )
    cutDown.value = 60
    const interval = setInterval(() => {
        if (cutDown.value > 0) {
            cutDown.value--
        } else {
            clearInterval(interval)
            loadingCode.value = false
        }
    }, 1000);
}
</script>

<style lang="scss">
.border {
    border: 1px solid white;
}


.phone-code {
    color: white;
    font-size: 14px;
}


$bg: #283443;
$light_gray: #fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .logReg-container .el-input input {
        color: $cursor;
    }
}

/* reset element-plus css */
.logReg-container {
    .el-form-item.is-error {
        .el-input__wrapper {
            background: none;
            box-shadow: none;
            display: block;
        }
    }

    .el-input {
        display: inline-block;
        height: 47px;
        width: 85%;

        .el-input__wrapper {
            background: none;
            box-shadow: none;
            display: block;
        }

        input {
            background: transparent;
            border: 0px;
            border-radius: 0px;
            padding: 12px 5px 12px 15px;
            color: $light_gray;
            height: 47px;
            caret-color: $cursor;

            &:-webkit-autofill {
                box-shadow: 0 0 0px 1000px $bg inset !important;
                -webkit-text-fill-color: $cursor !important;
            }
        }
    }

    .el-form-item {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545;
    }
}

@media (max-width: 768px) {
    .logReg-container .el-input {
        width: 100%;
        height: 40px;
    }

    .logReg-container .el-input input {
        padding: 10px;
        height: 40px;
    }

    .logReg-container .el-form-item {
        margin-bottom: 10px;
    }
}
</style>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.reglink {
    color: #409eff;
    text-decoration: underline;
}

.logReg-container {
    min-height: 100vh;
    width: 100%;
    background-color: $bg;
    overflow: hidden;

    .logReg-form {
        position: relative;
        width: 520px;
        max-width: 100%;
        padding: 160px 35px 0;
        margin: 0 auto;
        overflow: hidden;
    }

    .tips {
        font-size: 14px;
        color: #fff;
        margin-bottom: 10px;

        span {
            &:first-of-type {
                margin-right: 16px;
            }
        }
    }

    .svg-container {
        padding: 6px 5px 6px 15px;
        color: $dark_gray;
        vertical-align: middle;
        width: 30px;
        display: inline-block;
    }

    .title-container {
        position: relative;

        .title {
            font-size: 26px;
            color: $light_gray;
            margin: 0px auto 40px auto;
            text-align: center;
            font-weight: bold;
        }
    }

    .show-pwd {
        position: absolute;
        right: 10px;
        top: 7px;
        font-size: 16px;
        color: $dark_gray;
        cursor: pointer;
        user-select: none;
    }
}

@media (max-width: 768px) {
    .logReg-container {
        padding: 20px;

        .logReg-form {
            width: 100%;
            padding: 80px 20px 0;
        }

        .tips {
            font-size: 12px;

            span {
                margin-right: 8px;
            }
        }

        .svg-container {
            width: 24px;
            padding: 4px;
        }

        .title-container .title {
            font-size: 22px;
            margin: 0px auto 20px auto;
        }

        .show-pwd {
            right: 5px;
            top: 5px;
            font-size: 14px;
        }
    }
}
</style>
